//? TYPESCALE
$reference-typescale-font: "Rubik";
$reference-typescale-baseSize: 16px;
$reference-typescale-baseLineHeight: 1;
$reference-typescale-headingLineHeight: 1.25;

//* hue values
$reference-color-hue-red: 350;
$reference-color-hue-orange: 35;
$reference-color-hue-yellow: 50;
$reference-color-hue-green: 130;
$reference-color-hue-mint: 160;
$reference-color-hue-cyan: 200;
$reference-color-hue-blue: 210;
$reference-color-hue-indigo: 240;
$reference-color-hue-purple: 270;
$reference-color-hue-pink: 330;
$reference-color-hue-gray: 210;

/*
 ? to test colors, uncomment here 👉 *
$green: hsl(350, 75%, 50%);
$green: hsl(35, 75%, 50%);
$green: hsl(50, 75%, 50%);
$green: hsl(125, 75%, 50%);
$green: hsl(160, 75%, 50%);
$green: hsl(190, 75%, 50%);
$green: hsl(200, 75%, 50%);
$green: hsl(210, 75%, 50%);
$green: hsl(240, 75%, 50%);
$green: hsl(280, 75%, 50%);
$green: hsl(340, 75%, 50%);
$green: hsl(215, 15%, 50%);

/**/

$reference-color-baseSaturation: 70%; // generate color based on this (default)

//? DIFFERENT COLOR TONES

//* red
$reference-color-red-100: hsl($reference-color-hue-red, $reference-color-baseSaturation, 100%);
$reference-color-red-99: hsl($reference-color-hue-red, $reference-color-baseSaturation, 99%);
$reference-color-red-95: hsl($reference-color-hue-red, $reference-color-baseSaturation, 95%);
$reference-color-red-90: hsl($reference-color-hue-red, $reference-color-baseSaturation, 90%);
$reference-color-red-80: hsl($reference-color-hue-red, $reference-color-baseSaturation, 80%);
$reference-color-red-70: hsl($reference-color-hue-red, $reference-color-baseSaturation, 70%);
$reference-color-red-60: hsl($reference-color-hue-red, $reference-color-baseSaturation, 60%);
$reference-color-red-50: hsl($reference-color-hue-red, $reference-color-baseSaturation, 50%);
$reference-color-red-40: hsl($reference-color-hue-red, $reference-color-baseSaturation, 40%);
$reference-color-red-30: hsl($reference-color-hue-red, $reference-color-baseSaturation, 30%);
$reference-color-red-20: hsl($reference-color-hue-red, $reference-color-baseSaturation, 20%);
$reference-color-red-10: hsl($reference-color-hue-red, $reference-color-baseSaturation, 10%);
$reference-color-red-00: hsl($reference-color-hue-red, $reference-color-baseSaturation, 0%);

//* orange
$reference-color-orange-100: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 100%);
$reference-color-orange-99: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 99%);
$reference-color-orange-95: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 95%);
$reference-color-orange-90: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 90%);
$reference-color-orange-80: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 80%);
$reference-color-orange-70: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 70%);
$reference-color-orange-60: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 60%);
$reference-color-orange-50: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 50%);
$reference-color-orange-40: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 40%);
$reference-color-orange-30: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 30%);
$reference-color-orange-20: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 20%);
$reference-color-orange-10: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 10%);
$reference-color-orange-00: hsl($reference-color-hue-orange, $reference-color-baseSaturation, 0%);

//* yellow
$reference-color-yellow-100: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 100%);
$reference-color-yellow-99: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 99%);
$reference-color-yellow-95: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 95%);
$reference-color-yellow-90: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 90%);
$reference-color-yellow-80: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 80%);
$reference-color-yellow-70: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 70%);
$reference-color-yellow-60: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 60%);
$reference-color-yellow-50: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 50%);
$reference-color-yellow-40: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 40%);
$reference-color-yellow-30: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 30%);
$reference-color-yellow-20: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 20%);
$reference-color-yellow-10: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 10%);
$reference-color-yellow-00: hsl($reference-color-hue-yellow, $reference-color-baseSaturation, 0%);
//* green
$reference-color-green-100: hsl($reference-color-hue-green, $reference-color-baseSaturation, 100%);
$reference-color-green-99: hsl($reference-color-hue-green, $reference-color-baseSaturation, 99%);
$reference-color-green-95: hsl($reference-color-hue-green, $reference-color-baseSaturation, 95%);
$reference-color-green-90: hsl($reference-color-hue-green, $reference-color-baseSaturation, 90%);
$reference-color-green-80: hsl($reference-color-hue-green, $reference-color-baseSaturation, 80%);
$reference-color-green-70: hsl($reference-color-hue-green, $reference-color-baseSaturation, 70%);
$reference-color-green-60: hsl($reference-color-hue-green, $reference-color-baseSaturation, 60%);
$reference-color-green-50: hsl($reference-color-hue-green, $reference-color-baseSaturation, 50%);
$reference-color-green-40: hsl($reference-color-hue-green, $reference-color-baseSaturation, 40%);
$reference-color-green-30: hsl($reference-color-hue-green, $reference-color-baseSaturation, 30%);
$reference-color-green-20: hsl($reference-color-hue-green, $reference-color-baseSaturation, 20%);
$reference-color-green-10: hsl($reference-color-hue-green, $reference-color-baseSaturation, 10%);
$reference-color-green-00: hsl($reference-color-hue-green, $reference-color-baseSaturation, 0%);

//* mint
$reference-color-mint-100: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 100%);
$reference-color-mint-99: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 99%);
$reference-color-mint-95: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 95%);
$reference-color-mint-90: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 90%);
$reference-color-mint-80: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 80%);
$reference-color-mint-70: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 70%);
$reference-color-mint-60: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 60%);
$reference-color-mint-50: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 50%);
$reference-color-mint-40: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 40%);
$reference-color-mint-30: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 30%);
$reference-color-mint-20: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 20%);
$reference-color-mint-10: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 10%);
$reference-color-mint-00: hsl($reference-color-hue-mint, $reference-color-baseSaturation, 0%);

//* cyan
$reference-color-cyan-100: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 100%);
$reference-color-cyan-99: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 99%);
$reference-color-cyan-95: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 95%);
$reference-color-cyan-90: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 90%);
$reference-color-cyan-80: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 80%);
$reference-color-cyan-70: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 70%);
$reference-color-cyan-60: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 60%);
$reference-color-cyan-50: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 50%);
$reference-color-cyan-40: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 40%);
$reference-color-cyan-30: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 30%);
$reference-color-cyan-20: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 20%);
$reference-color-cyan-10: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 10%);
$reference-color-cyan-00: hsl($reference-color-hue-cyan, $reference-color-baseSaturation, 0%);

//* blue
$reference-color-blue-100: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 100%);
$reference-color-blue-99: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 99%);
$reference-color-blue-95: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 95%);
$reference-color-blue-90: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 90%);
$reference-color-blue-80: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 80%);
$reference-color-blue-70: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 70%);
$reference-color-blue-60: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 60%);
$reference-color-blue-50: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 50%);
$reference-color-blue-40: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 40%);
$reference-color-blue-30: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 30%);
$reference-color-blue-20: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 20%);
$reference-color-blue-10: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 10%);
$reference-color-blue-00: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 0%);

//* indigo
$reference-color-indigo-100: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 100%);
$reference-color-indigo-99: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 99%);
$reference-color-indigo-95: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 95%);
$reference-color-indigo-90: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 90%);
$reference-color-indigo-80: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 80%);
$reference-color-indigo-70: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 70%);
$reference-color-indigo-60: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 60%);
$reference-color-indigo-50: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 50%);
$reference-color-indigo-40: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 40%);
$reference-color-indigo-30: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 30%);
$reference-color-indigo-20: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 20%);
$reference-color-indigo-10: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 10%);
$reference-color-indigo-00: hsl($reference-color-hue-indigo, $reference-color-baseSaturation, 0%);

//* purple
$reference-color-purple-100: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 100%);
$reference-color-purple-99: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 99%);
$reference-color-purple-95: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 95%);
$reference-color-purple-90: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 90%);
$reference-color-purple-80: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 80%);
$reference-color-purple-70: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 70%);
$reference-color-purple-60: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 60%);
$reference-color-purple-50: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 50%);
$reference-color-purple-40: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 40%);
$reference-color-purple-30: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 30%);
$reference-color-purple-20: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 20%);
$reference-color-purple-10: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 10%);
$reference-color-purple-00: hsl($reference-color-hue-purple, $reference-color-baseSaturation, 0%);

//* pink
$reference-color-pink-100: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 100%);
$reference-color-pink-99: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 99%);
$reference-color-pink-95: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 95%);
$reference-color-pink-90: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 90%);
$reference-color-pink-80: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 80%);
$reference-color-pink-70: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 70%);
$reference-color-pink-60: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 60%);
$reference-color-pink-50: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 50%);
$reference-color-pink-40: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 40%);
$reference-color-pink-30: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 30%);
$reference-color-pink-20: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 20%);
$reference-color-pink-10: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 10%);
$reference-color-pink-00: hsl($reference-color-hue-pink, $reference-color-baseSaturation, 0%);

//* gray
$reference-color-gray-100: hsl($reference-color-hue-gray, 15%, 100%);
$reference-color-gray-99: hsl($reference-color-hue-gray, 15%, 99%);
$reference-color-gray-95: hsl($reference-color-hue-gray, 15%, 95%);
$reference-color-gray-90: hsl($reference-color-hue-gray, 15%, 90%);
$reference-color-gray-80: hsl($reference-color-hue-gray, 15%, 80%);
$reference-color-gray-70: hsl($reference-color-hue-gray, 15%, 70%);
$reference-color-gray-60: hsl($reference-color-hue-gray, 15%, 60%);
$reference-color-gray-50: hsl($reference-color-hue-gray, 15%, 50%);
$reference-color-gray-40: hsl($reference-color-hue-gray, 15%, 40%);
$reference-color-gray-30: hsl($reference-color-hue-gray, 15%, 30%);
$reference-color-gray-20: hsl($reference-color-hue-gray, 15%, 20%);
$reference-color-gray-10: hsl($reference-color-hue-gray, 15%, 10%);
$reference-color-gray-00: hsl($reference-color-hue-gray, 15%, 0%);
